Le défi minimalisme
Ce projet est juste un projet d'entrainement fictif que j'ai réalisé en suivant un certain nombre de règles listés ci-dessous.
Les règles :
1. - Interdiction d’utiliser la moindre image ou vidéo sur le site. Tous les formats d’image bitmap ou vectoriel sont proscrit. Les seuls éléments décoratifs autorisés sont les décorations de texte par défaut.
2. - Le site doit comprendre au moins 3 sections de texte bien distinctes composées uniquement de texte.
3. - Le site ne doit pas avoir plus d’une animation codée ou pouvant être codée en javascript. Il est bien sûr interdit de réutiliser l’animation.
4. - Interdiction d’utiliser plus de 2 couleurs/nuances sur le site. (Le noir et blanc ne sont pas inclues. Leur utilisation seront comptabilisés comme une couleur.)
5. - Interdiction d’utiliser des polices personnalisés. Les seules polices tolérés sont celles présentent par défaut sur les navigateurs (Arial, Times New Roman, ...)
6. - Le site doit être le plus léger possible et codé uniquement en html, css et javascript. Aucune librairie, framework, plugin, langage, ... n’est autorisé sur le site.
Mockup réalisé à partir de l'image disponible gratuitement sur Freepik grâce à zlatko_plamenov.
Règle 1
J'ai respecté cette règle à la lettre, car sur le site, je n'ai pas utilisé la moindre illustration, vidéo ni image. (Hormis sur la maquette pour donner un aperçu de l'animation que j'allais ensuite réaliser en javascript.)
La vidéo suivante a été réalisée avec After Effects.
Règle 2
Le site est composé de plusieurs parties que j'ai essayé de rendre attractives en dépit de la règle numéro 1. Chaque texte présent sur le site a été rédigé par moi-même.
Règle 3
Voici le rendu avec la vidéo incluse dans la maquette qui est, je le rappelle, la seule animation présente sur le site.
Règle 4
Les seules couleurs utilisées sur le site sont une couleur claire #E0E0E0 et une couleur foncée #3E3E3E qui sont, selon WebAIM, deux couleurs dont l'accessibilité est très bonne ! En ce qui concerne les chiffres qui illustrent les différentes règles du défi, j'ai mis une opacité à 80%, c'est pour cela que la couleur n'est pas exactement la même.
Règle 5
Comme spécifié dans les règles du défi, je n'ai utilisé que des polices présentes par défaut sur les navigateurs. Plus précisément, j'ai utilisé Arial dans sa forme regular et bold. J'ai également utilisé Times New Roman, également dans sa forme regular et bold.
Règle 6
La maquette présentée ici peut être codée entièrement en natif. La seule animation JavaScript présente est celle de l'animation de texte. Le texte en cercle peut être réalisé en CSS.
Pour plus de travaux, n'hésitez pas à me suivre ou à laisser un commentaire ou une appréciation.
